<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- 需要前后端配合 使用 -->
    <!-- 服务器 可以主动给客户端发送数据       实时更新 -->
    <!-- websocket是应用层上的一个应用协议，websocket的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，值真正的平等对话。 -->
   <div class="box"></div>


    <script>
        // console.log(new WebSocket('ws://127.0.0.1:5500/'), '????');
        // ws.onmessage((data) => {}): message事件监听服务器端的返回数据；
//         const socket = new WebSocket('ws://192.168.10.218:3000')

//         function open() {
//             console.log("连接成功")
//         }
//         function error() {
//             console.log("连接错误")
//         }
//         function onclose() {
//             console.log("关闭链接")
//         }

//         function getMessage(res) {
//             console.log("收取到的信息", res)
//             // this.receiveMsg.push(res.data)
//         }

//         //CONNECTING：值为0，表示正在连接；
//         // OPEN：值为1，表示连接成功，可以通信了；
//         // CLOSING：值为2，表示连接正在关闭；
//         // CLOSED：值为3，表示连接已经关闭，或者打开连接失败。
//         // socket.onclose=onclose
//         socket.open = open
//         socket.error = error
//         socket.getMessage = getMessage
//         // socket.onclose = function () {
//         //     console.log(11111111111);
//         // }
//         console.log(socket.readyState, '状态值');
//         socket.open()
//         // // console.log(socket.close);
//         // console.log(socket, '...............');
//         // socket.addEventListener('close', function (event) {
//         //     console.log('监听关闭');
//         //     // socket.send('Hello Server!');
//         // });
//         // // socket.close()

//         // // // 监听消息
//         // socket.addEventListener('message', function (event) {
//         //     console.log('Message from server ', event.data);
//         // });
//         socket.getMessage()
// if (socket.readyState===1) {
//     socket.send('哈哈哈')
// }

     // 打开一个 web socket  这里端口号和上面监听的需一致
     var ws = new WebSocket('ws://localhost:3000/');
setTimeout(()=>{
    if (ws.readyState==1) {
    ws.send('哈哈哈')
}
},3000)
   // Web Socket 已连接上，使用 send() 方法发送数据
           console.log(ws.readyState, '状态值');
//    ws.open()
//    ws.onopen = function() {
//    // 这里用一个延时器模拟事件
    //    setInterval(function() {
    //        ws.send('客户端消息');
    //    },2000);
//    }
   // 这里接受服务器端发过来的消息
   ws.onmessage = function(e) {
       console.log(e.data)
   }

  
    </script>
</body>

</html>